<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 父组件/根组件使用了子组件count-down -->

        <count-down :time="100"></count-down>
        <count-down :time="1000"></count-down>
        <count-down :time="10000"></count-down>

    </div>
</body>
<!-- <script>
    function fn(){
        var x = 1;
        a()
        a()
        a()
        b();
    }
</script> -->
<script>
    // 组件: 是一个可复用的Vue实例  => 将Vue中可重复使用的功能提取出来,封装为组件 

    // 如何封装组件? 
    // 1. 全局组件  => 借助 Vue.component(name,options) 方法(构造函数Vue的静态方法)
    // name 组件名称, 复杂的组件名,一般建议使用中划线命名法(count-down  -> Vue2),也可以使用大驼峰式命名法(CountDown -> Vue3)
    // options  组件的配置项 data methods computed watch 生命周期及钩子函数


    // 2. 局部组件



    // 全局组件
    Vue.component("count-down", {
        props: ["time"],
        data: function () {
            return {
                countTime: this.time,  //倒计时的时间(s)
                timer: null,
            }
        },
        template: `<div class="count-down">
            {{beauty(hour)}}:{{beauty(min)}}:{{beauty(sec)}}
        </div>`,
        methods: {
            beauty(num) {
                return num < 10 ? "0" + num : num;
            },
            countDownHandler() {
                clearInterval(this.timer);
                this.timer = setInterval(() => {
                    this.countTime--;
                }, 1000)
            }
        },
        computed: {
            // 将倒计时的时间换算为天时分秒
            day: function () {
                return parseInt(this.countTime / (24 * 60 * 60));
            },
            hour: function () {
                // 总的时间 % 一天的时间 =>  不满一天的时间
                // 不满一天的时间 / 一小时
                return parseInt(this.countTime % (24 * 60 * 60) / (60 * 60))
            },
            min: function () {
                // 不满一小时 / 一分钟
                return parseInt(this.countTime % (60 * 60) / 60);
            },
            sec: function () {
                // 不满一小时 / 一分钟
                return this.countTime % 60;
            },
        },
        beforeCreate() {
            console.log("子组件count-down:beforeCreate");
        },
        created() {
            console.log("子组件count-down:created");
        },
        beforeMount() {
            console.log("子组件count-down:beforeMount");
        },
        mounted() {
            this.countDownHandler();
            console.log("子组件count-down:mounted", this);
        },
    })


    // 根组件
    var app = new Vue({
        el: "#app",
        data: {
            count: 1,
        },
        beforeCreate() {
            console.log("根组件:beforeCreate");
        },
        created() {
            console.log("根组件:created");
        },
        beforeMount() {
            console.log("根组件:beforeMount");
        },
        mounted() {
            console.log("根组件:mounted", this);
        },
    })








</script>

</html>